<%@ page language="java" contentType="text/html; charset=UTF-8" %>
    <!-- 页首-->
    <%@ include file="/WEB-INF/views/commons/header.jsp" %>

        <!--main wrapper-->
        <div class="wrapper row-offcanvas row-offcanvas-left">
            <!-- 左侧菜单 -->
            <%@ include file="/WEB-INF/views/commons/leftMenu.jsp" %>

                <!-- 正文 -->
                <aside class="right-side">
                    <!-- 正文 头-->
                    <section class="content-header">
                        <h1>
                        会员管理
                    </h1>
                        <ol class="breadcrumb">
                            <li><a href="${ctx}/main"><i class="fa fa-home"></i> 首页</a>
                            </li>
                            <li class="active">会员管理</li>
                        </ol>
                    </section>

                    <!-- 内容-->
                    <section class="content">
                        <div class="box box-info">
                            <div class="box-header">
                                <h4 class="box-title"> 
                                
                            </h4>
                                <div class="box-tools pull-right">
                                    <button class="btn btn-success" id="addCustomer" rel="#overlay"><i class="ion ion-person-add"></i> 新增用户</button>
                                </div>

                            </div>

                            <div class="box-body">
                                <div class="row">
                                    <!-- 用户总数 -->
                                    <div class="col-lg-3 col-xs-6">

                                        <div class="small-box bg-aqua">
                                            <div class="icon">
                                                <i class="ion ion-person-add"></i>
                                            </div>
                                            <div class="inner">
                                                <p>
                                                    <strong id="todayCounts"> 今日新增：${today.counts} +</strong>
                                                </p>
                                                <p>
                                                    <strong id="totalCounts"> 用户总数：${total.counts}</strong>
                                                </p>
                                            </div>

                                            <a class="small-box-footer">
                                          &nbsp;
                                        </a>
                                        </div>
                                    </div>

                                    <!-- 用户消费 -->
                                    <div class="col-lg-3 col-xs-6">

                                        <div class="small-box bg-green">
                                            <div class="icon">
                                                <i class="ion ion-ios7-cart-outline"></i>
                                            </div>
                                            <div class="inner">
                                                <p>
                                                    <strong > 今日消费：${today.customerSpend} +</strong>
                                                </p>
                                                <p>
                                                    <strong > 累计消费：${total.customerSpend} 元</strong>
                                                </p>
                                            </div>

                                            <a class="small-box-footer">
                                          &nbsp;
                                        </a>
                                        </div>
                                    </div>

                                    <!-- 用户充值 -->
                                    <div class="col-lg-3 col-xs-6">

                                        <div class="small-box bg-teal">
                                            <div class="icon">
                                                <i class="ion ion-social-usd-outline"></i>
                                            </div>
                                            <div class="inner">
                                                <p>
                                                    <strong id="todayCredit"> 今日充值：${today.credit} +</strong>
                                                </p>
                                                <p>
                                                    <strong id="totalCredit"> 累计充值：${total.credit} 元</strong>
                                                </p>
                                            </div>

                                            <a class="small-box-footer">
                                          &nbsp;
                                        </a>
                                        </div>
                                    </div>



                                </div>

                                <div class="box">
                                    <div class="box-header">

                                    </div>
                                    <!-- /.box-header -->
                                    <div class="box-body table-responsive">
                                        <table id="customerList" class="table table-bordered table-striped">
                                            <thead>
                                                <tr>
                                                    <th>店铺</th>
                                                    <th>卡号</th>
                                                    <th>用户名</th>
                                                    <th>性别</th>
                                                    <th>手机</th>
                                                    <th>累计消费</th>
                                                    <th>累计充值</th>
                                                    <th>余额</th>
                                                    <th>最近消费</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                               <c:forEach var="customer" items="${customerList}"> 
                                                   <tr>
                                                       <td>${customer.companyName}</td>
                                                       <td>${customer.cardno}</td>
                                                       <td>${customer.name}</td>
                                                       <td>${customer.sex == 1 ? "女": "男"}</td>
                                                       <td>${customer.mobile}</td>
                                                       <td>${customer.totalSpend} 元</td>
                                                       <td>${customer.totalCredit} 元</td>
                                                       <td>${customer.balance} 元</td>
                                                       <td>${customer.lastSpendTime}</td>
                                                   </tr>
                                               
                                               </c:forEach>
                                                


                                            </tbody>
                                           
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
        </div>

        </section>
        <!-- 内容结束 -->
        </aside>
        <!-- 内容结束 -->
        </div>
     
            
            
        <!-- 页尾-->
        <%@ include file="/WEB-INF/views/commons/end.jsp" %>
            
        <script>
             $(function() {
                var customers = $('#customerList').dataTable({"oLanguage": {"sUrl": "${res}/lib/datatables/jquery.dataTables.cn.txt"}});
                
               
                 
                $('#addCustomer').overlyDailog({
                     title:'添加会员',
                     size : 4,
                     url:'${ctx}/customer/new',
                     berforeClose:function(is_ok,f){
                        if(is_ok){
                          $.ajax({
                            url:'${ctx}/customer/new',
                            data:f,
                            success:function(ret){
                                var customer = ret.customer;
                                
                                customers.fnAddData([
                                    customer.companyName ,
                                    customer.cardno ,
                                    customer.name ,
                                    ['男','女'][customer.sex] ,
                                    customer.mobile ,
                                    customer.totalSpend +' 元',
                                    customer.totalCredit +' 元',
                                    customer.balance +' 元',
                                    customer.lastSpendTime 
                                ]);
                                customers.fnDraw();
                                
                                $('#totalCounts').text('用户总数: '+ret.totalCounts);
                                $('#todayCounts').text('今日新增：'+ret.todayCounts+' +');
                                $('#todayCredit').text('今日充值： '+ ret.todayCredit+' +');
                                $('#totalCredit').text('累计充值： '+ ret.totalCredit+' 元');
                                
                            
                            }
                          });
                        }
                     }
                });
                 
                
            });
        
        </script>